<template>
<div>
    <!-- 新增班级按钮 -->
    <el-row type="flex" justify="center" class="tac" style="margin-top:10px;">
        <el-col :span="22">
            <el-button type="primary" @click="dialogFormVisible = true">新增班级<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>

    <el-dialog title="新增班级" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="班级名称" label-width="formLabelWidth">
            <el-input v-model="form.cname" placeholder="请输入班级名称" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addClasses()">确 定</el-button>
        </div>
    </el-dialog>

    </el-row>
    

    <el-row type="flex" justify="center" class="tac" style="margin-top:20px;margin-bottom: 300px">
    <el-col :span="22">

        <el-table
        :data="classesList"
        border
        stripe
        style="width: 100%">
        <el-table-column
        prop="name"
        label="班级名称"
        width="280">
        </el-table-column>
        <el-table-column
        prop="tname"
        label="管理员"
        width="180">
        </el-table-column>
        <el-table-column
        prop="joinKey"
        label="加入口令"
        width="180">
        </el-table-column>
        <el-table-column
        prop="creatTime"
        label="创建时间">
        </el-table-column>

         <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    </el-col>

    </el-row>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import classesApi from '@/api/classes'

export default {
  name: 'MyClasses',
  computed: {
    ...mapGetters([
      'name',
      'id'
    ])
  },
  inject:['reload'],
  data () {
      return {
          classesList:null,
          dialogFormVisible:false,
          form:{
              cname:null
              },
      }
  },

  created () {
      this.fetchClasses()
  },

  methods:{

      // 获取班级信息
      fetchClasses(){
          classesApi.queryClassesListBySid(this.id).then(response =>{
              this.classesList = response.data
          })
      },

      // 新增班级
      addClasses(){
          classesApi.creatClasses(this.id,this.form.cname).then(response =>{
              
              this.dialogFormVisible = false
              if(response.flag){
                  this.$notify({
                    title: '成功',
                    message: response.message,
                    type: 'success'
                    });
              }
              this.reload()
          })
      },
    
      handleEdit(cid) {
        this.$router.push({name:"StuInfo",query:{cid:cid}})
      },
      handleDelete(cid) {
        classesApi.deleteClasses(cid).then(response =>{
              if(response.flag){
                  this.$notify({
                    title: '成功',
                    message: response.message,
                    type: 'success'
                    });
              }
              this.reload()
          })
      }
  }

  
}
</script>
